@import "reset.scss";
@import "../utils/iconfont/iconfont.css";

@function getvw($w){
    @return ($w / 750) * 100 + vw;
}
@function getvmin($vmin){
    @return ($vmin / 750) * 100 + vmin;
}
@keyframes trans{
    30%{ 
        transform: translate(getvw(-750));
    }
    50%{ 
        transform: translate(getvw(-750));
    }
    80%{ 
        transform: translate(getvw(-1500));
    }
    100%{
        transform:translate(getvw(-1500));
    }
}
.wrap{
    width: getvw(750);
    padding-bottom:getvw(110);
    header{
        .header_top{
            width: getvw(704);
            margin:0 getvw(23);
            display: flex;
            justify-content:space-between;
            align-items:center;
            .logo{
                margin: getvw(17) 0 getvw(10);
                width:getvw(123);
                height:getvw(123);
                >img{
                    width:100%;
                    height: 100%;
                    display: block;
                }
            }
            .Back{
                width: getvw(123);
                height: getvw(57);
                border:getvw(2) solid #ff9344;
                margin: getvw(48) 0 getvw(12);
                font-size: getvmin(26);
                line-height: getvw(57);
                color: #000;
                text-align: center;
            }            
            .search{
                width: getvw(266);
                height: getvw(50);
                position: relative;
                >input{
                    font-size: getvmin(24);
                    color: #777777;
                    line-height: getvw(44);
                    text-indent:getvmin(30);
                    width: getvw(266);
                    height: getvw(50);
                    border-radius:getvw(25);
                    border: getvw(2) solid #ff9344;
                }
                >.icon{
                    font-size: getvmin(30);
                    color: #ff9344;
                    position: absolute;
                    top:50%;
                    right:5%;
                    transform: translate(0 , -40%);
                }
            }
            h3{
                font-size: getvmin(26);
                font-weight: none;
            }
            .menu{
                select{
                    width: getvw(160);
                    height: getvw(57);
                    border: getvw(2) solid #ff9344;
                    font-size: getvwmin(26);
                    color: #000;
                    text-align: center;
                }
            }
            .header-icon{
                .head-icon{
                    font-size: getvmin(45);
                    color: #ff9344;
                }
            }
        }
        .header_bottom{
            width: 100%;
            height: getvw(286);
            overflow: hidden;
            >ul{
                width:300%;
                height:100%;
                display: flex;
                animation:trans 5s ease-in-out infinite;
                >li{
                    width: getvw(750);
                    height: 100%;
                    >img{
                        width: 100%;
                        display: block;
                    }
                }
            }
        }
    }
    main{
        width: getvw(704);
        margin: 0 getvw(23);
        .main_flex{
            margin-top: getvw(28);
            display:flex;
            justify-content:space-between;
            align-items:center;
            .main_left{
                display: flex;
                align-items: center;
                .left_icon{
                    font-size:getvw(54);
                    color: #ff9344;    
                }
                >span{
                    font-size: getvw(30);
                    color: #000;
                    margin-left: getvw(10);
                }
            }
            .main_right{
                display: flex;
                align-items: center;
                >span{
                    font-size: getvw(24);
                    color:#000;
                    margin-right: getvw(10);
                }
                .right_icon{
                    font-size:getvw(25);
                    color:  #ff9344;
                }
            }
        }
        .main_img{
            width: 100%;
            margin:0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            .main_imgbox{
                padding:getvw(15) getvw(56);
                >img{
                 width: getvw(240);
                 height: getvw(95);
                 display: block;   
                }
            }
        }
        .main_text{
            padding: getvw(15) 0;
            display: flex;
            justify-content:space-between;
            .text_img{
                width: getvw(211);
                >a{
                    width: 100%;
                    >img{
                    width: 100%;
                    display: flex;
                    }
                }   
            }
            .text{
                width:getvw(470);
                display: flex;
                flex-direction:column ;
                justify-content: space-around;
                p{
                    display: flex;
                    justify-content: space-between;
                    font-size:getvw(30) ;
                    color: #000;
                    span:last-child{
                        font-size:getvw(22);
                        color: #494949;
                    }
                }
                p:nth-of-type(2){
                    font-size: getvw(22);
                    color: #494949;
                }
                p:nth-of-type(3){
                    font-size: getvw(32);
                    color: #ff9344;
                    span:last-child{
                        font-size:getvw(22) ;
                        color: #494949;
                    }
                }
            }
        }
    }
    footer{
        width: 100%;
        background-color: #fff;
        position:fixed;
        bottom:0;
        ul{
            display: flex;
            padding:getvw(10) 0;
            justify-content:space-between;
            li{
                flex: 1;
                text-align: center;
                a{
                    color:#000;
                    .iconfoot{
                        font-size:getvmin(73);
                        color: #ff9344;
                    }
                    span{
                        display: block;
                        font-size:getvmin(26);
                    }
                }  
            }
        }
    }
}